<template>
  <button
    class="os-button"
    :class="[
      'os-button--' + type,
      disabled ? 'is-disabled' : '',
      'osbutton--size-' + size,
    ]"
    @click="handleClick"
    :disabled="disabled"
  >
    <i v-if="icon" :class="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: "OsButton",
  props: {
    type: {
      type: String,
      default: "default",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "middle",
    },
    icon: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style lang="scss">
.os-button {
  cursor: pointer;
  display: inline-block;
  color: #fff;
  text-align: center;
  outline: none;
  border-radius: 5px;
  padding: 5px 10px;
  margin: 0px 5px;
}
.is-disabled {
  cursor: not-allowed;
}
.os-button--default {
  background: #5c89f2;
  border: 1px solid #3d70ef;
  &:hover {
    background-color: #3d70ef;
  }
}
.os-button--warning {
  background: #d9ba8a;
  border: 1px solid #d9ba8a;
  &:hover {
    background-color: #dab276;
  }
}
.os-button--danger {
  background: #e65c53;
  border: 1px solid #e03d34;
  &:hover {
    background-color: #e03d34;
  }
}

.osbutton--size-small {
  height: 28px;
  font-size: 8px;
}
.osbutton--size-middle {
  height: 40px;
  font-size: 14px;
}
.osbutton--size-large {
  height: 50px;
  font-size: 16px;
}

.os-button [class*="os-icon-"] + span {
  margin-left: 4px;
}
</style>
